<template>
  <div class="register">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="Username"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>

      <a-form-item
        label="nickname"
        name="nickname"
        :rules="[{ required: true, message: 'Please input your nickname!' }]"
      >
        <a-input-password v-model:value="formState.nickname" />
      </a-form-item>
      <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>
      <a-form-item
        label="passwordRepeat"
        name="passwordRepeat"
        :rules="[{ required: true, message: 'Please input your passwordRepeat!' }]"
      >
        <a-input-password v-model:value="formState.passwordRepeat" />
      </a-form-item>
    

      <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
        <div class="registermore">
          <a-checkbox v-model:checked="formState.remember"
            >Remember me</a-checkbox
          >
          <div><RouterLink to="login">去登陆</RouterLink></div>
        </div>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">注册</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import api from "@/api/index.js";
import { reactive } from "vue";
import { RouterLink } from "vue-router";

const formState = reactive({
  username: "tt",
  nickname:"tt",
  password: "tt",
  passwordRepeat:"tt"
  // remember: true,
});
const onFinish = async (userinfo) => {
  console.log("Success:", userinfo);
  const data = await api.register(userinfo);
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>

<style scoped>
.register {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.registermore {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
</style>
